<template>
    <div class="CourseInfo">
        <div class="nav">
            <el-input v-model="input" placeholder="请输入课程名" style="width: 250px; margin-top: 15px;" clearable
                @keyup.enter.native="handleQuery">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer; height: 10px;"
                    @click="handleQuery"></i>
            </el-input>
        </div>
        <div class="tab">
            <el-table style=" width: 94%; padding-top: 15px;" :data="tableData" stripe class="tableBox" :height="550">

                <el-table-column align="center" type="index" width="50"></el-table-column>
                <el-table-column align="center" prop="jiaoshixingming" label="教师姓名" width="100"></el-table-column>
                <el-table-column align="center" prop="kechengmingcheng" label="课程名称" width="120"></el-table-column>
                <el-table-column align="center" prop="kechengleixing" label="课程类型" width="100"></el-table-column>
                <el-table-column align="center" prop="kechengxiangqing" label="课程详情" width="500"></el-table-column>
                <el-table-column prop="photo" label="图片" width="100" align="center">
                    <template slot-scope="scope">
                        <el-image style="height: 40px; border:none;cursor: pointer; border-radius: 5px;"
                            :src="getImage(scope.row.photo)"
                            :preview-src-list="[`http://localhost:8086/common/download?name=${scope.row.photo}`]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="50" align="center"></el-table-column>

                <el-table-column label=" 操作" width="80" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" class="blueBug" @click="study(scope.row)">
                            学习
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination class="pageList" :page-sizes="[4, 8, 12, 16]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>


        <el-dialog class="el_dialog1" title="欢迎购买" :visible.sync="dialogTableVisible1" width="30%" top="5%">
            <p :model="payPrice" class="title">当前价格为{{ payPrice }}元，是否加入学习课程?</p>
            <span slot="footer" class="dialog-footer">
                <el-button class="buttonPay" @click="closePay">取 消</el-button>
                <el-button class="buttonPay" @click="submitPay">{{ buttonName }}</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script >
export default {
    name: 'CourseInfo',
    data() {
        return {
            dialogTableVisible1: false,

            imageUrl: "",
            formLabelWidth: '80px',
            input: "",
            //总数据条数
            counts: 0,
            //当前页
            page: 1,
            //每页条数
            pageSize: 4,
            // 表格数据
            tableData: [],

            selectInfo: {
                studentid: "",
                jiaoshigonghao: "",
                courseid: "",
                coursename: "",
                coursetype: "",
                jiaoshixingming: "",
                xueshengxingming: "",
            },
            orders: {
                studentid: "",
                jiaoshigonghao: "",
                courseid: "",
                coursename: "",
                jiaoshixingming: "",
                studentname: "",
                courseprice: "",
                pay: "",
                coursetype: "",
            },
            //确认窗口的价格显示变量
            payPrice: "",
            //确认窗口的按钮名称
            buttonName: "",
        }
    },
    mounted() {
        this.getTableData();
        this.getstudent();
    },
    methods: {
        handleQuery() {
            this.getTableData();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getTableData();
        },
        // 获取表格数据
        getTableData() {
            const params = {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input,
                }
            }
            this.axios.get("/kechengxinxi/page", params)
                .then(res => {
                    this.tableData = res.data.records;
                    this.counts = res.data.total;
                })
        },
        getstudent() {
            this.axios.get("/student/getstudent")
                .then(res => {
                    this.selectInfo.studentid = res.data.id;
                    this.selectInfo.xueshengxingming = res.data.xueshengxingming;
                    this.orders.studentname = res.data.xueshengxingming;
                    this.orders.studentid = res.data.id;
                })
        },
        getImage(image) {
            return `http://localhost:8086/common/download?name=${image}`
        },
        //关闭pay页面
        closePay() {
            this.dialogTableVisible1 = false;
        },
        study(val) {
            this.dialogTableVisible1 = true;
            console.log("数据", val);
            this.selectInfo.courseid = val.id;
            this.selectInfo.coursename = val.kechengmingcheng;
            this.selectInfo.coursetype = val.kechengleixing;
            this.selectInfo.jiaoshigonghao = val.jiaoshigonghao;
            this.selectInfo.jiaoshixingming = val.jiaoshixingming;
            this.orders.courseid = val.id;
            this.orders.coursename = val.kechengmingcheng;
            this.orders.jiaoshigonghao = val.jiaoshigonghao;
            this.orders.jiaoshixingming = val.jiaoshixingming;
            this.orders.courseprice = val.price;
            this.orders.coursetype = val.kechengleixing;
            this.orders.pay = 1;
            this.payPrice = val.price;
            if (this.payPrice === 0) {
                this.buttonName = "学 习";
            } else {
                this.buttonName = "购 买";
            }
            console.log("选课", this.selectInfo);
            console.log("订单", this.orders);
        },
        addStudy() {
            this.axios.post("/courseselection/save", this.selectInfo)
                .then(res => {
                    if (res.data === "success") {
                        this.$message({
                            type: "success",
                            message: "购买成功，已自动加入课程",
                        })
                    } else if (res.data === "no") {
                        this.$message({
                            type: "error",
                            message: "购买失败！自动加入课程失败",
                        })
                    }
                })
        },
        //支付成功
        submitPay() {
            this.axios.post("/orders/save", this.orders)
                .then(res => {
                    if (res.data === "success") {
                        this.$message({
                            type: "success",
                            message: "购买成功"
                        })
                        this.addStudy();
                    } else if (res.data === "no") {
                        this.$message({
                            type: "error",
                            message: "用户信息丢失，购买失败，请重新登录"
                        })
                    } else if (res.data === "exist") {
                        this.$message({
                            type: "error",
                            message: "该课程已经被购买，不能重复购买"
                        })
                    }
                })
            this.dialogTableVisible1 = false;
        },

    }
}

</script>

<style scoped>
@font-face {
    font-family: "textFont";
    src: url(../../font/也字工厂喵喵体.ttf);
}

.CourseInfo {
    width: 100%;
    height: 81vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}

.nav {
    width: 35%;
    height: 10%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);
}

.nav .el-button {
    width: 170px;
    height: 50px;
    font-size: 18px;
    background: #fff;
    border: none;
    border-radius: 50px;
    font-family: mmmm;
    font-weight: 500;
    color: #000;
    outline: none;
    cursor: pointer;
    transition: all 0.4s;
}

.nav .el-button:hover {
    background-color: rgba(29, 201, 160, 0.08);
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(-5px) scale(1.05);
}

.nav .el-button:active {
    background-color: transparent;
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(5px) scale(0.95);
}

.nav .el-button:disabled {
    background-color: rgba(255, 255, 255, 0.16);
    color: #8E8E93;
    border-color: #8E8E93;
}

.tab {
    width: 80%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);

}

.tab>>>.el-table tr {
    background-color: transparent;
}

.tab>>>.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: transparent;
}

.tab>>>.el-table th.el-table__cell {
    background-color: transparent;
}

.tableBox {
    background-color: transparent;
}

.pageList {
    margin-top: 10px;
    text-align: center;
}

.pageList>>>.el-pager li {
    background-color: transparent;
}


.el_dialog1 .buttonPay {
    width: 80px;
    height: 40px;
    font-size: 20px;
    font-family: textFont;
}

.el_dialog1 .title {
    font-size: 20px;
    font-weight: 700;
    height: 30px;
    font-family: textFont;
    line-height: 30px;
}
</style>